<template>
  <div>
    <div class="head">
      <img class="img"
           src="../../assets/index/tag.png"
           alt="" />
      申请择校信息
      <img class="edit"
           @click="dialogVisible = true"
           src="../../assets/index/edit.png"
           alt="" />
      <el-dialog title="修改择校信息"
                 :visible.sync="dialogVisible"
                 width="60%"
                 @close="closeFun()">
        <el-form ref="formInline"
                 :rules="rules"
                 :model="formInline"
                 :inline="true"
                 label-width="80px">
          <el-form-item class="el-form-item"
                        label="学校 :"
                        prop="schoolId">
            <el-input class="el-input"
                      v-model.trim="formInline.schoolId"
                      placeholder="学校编号"></el-input>
          </el-form-item>
          <el-form-item label="专业 :">
            <el-input class="el-input"
                      v-model.trim="formInline.majorName"
                      placeholder="专业名称">
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button @click="getSearchList">搜索</el-button>
          </el-form-item>
        </el-form>
        <div>
          <el-table class="el-table"
                    ref="multipleTable"
                    :data="choiceSchoolData"
                    @select="select"
                    @select-all="selectAll"
                    border
                    style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="schoolId"
                             label="编号"> </el-table-column>
            <el-table-column prop="school"
                             label="所属学校"> </el-table-column>
            <el-table-column prop="majorCName"
                             label="专业中文名称">
            </el-table-column>
            <el-table-column prop="majorEName"
                             label="专业英文名称">
            </el-table-column>
            <el-table-column prop="educationalSystem"
                             label="学制">
            </el-table-column>
            <el-table-column prop="tuition"
                             label="学费/年">
              <template slot-scope="scope">
                ￡{{scope.row.tuition}}
              </template>
            </el-table-column>
            <el-table-column prop="proportion"
                             label="国际生比例">
            </el-table-column>
            <el-table-column prop="operation"
                             label="操作">
              <template slot-scope="scope">
                <el-button type="text"
                           @click="handleClick(scope.row)"
                           size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paging">
          <paging class="paging"
                  :total="total"
                  @size="size"
                  @currentpage="currentpage"></paging>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="commit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="essential-information">
      <el-table class="el-table"
                ref="multipleTable"
                :data="choiceSchoolInfo"
                border
                style="width: 100%">
        <el-table-column prop="schoolCH"
                         label="中文学校名称">
        </el-table-column>
        <el-table-column prop="schoolEN"
                         label="英文学校名称">
        </el-table-column>
        <el-table-column prop="majorCH"
                         label="中文专业名称"> </el-table-column>
        <el-table-column prop="majorEN"
                         label="英文专业名称"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
import search from '../../component/search/search.vue'
import paging from '../../component/paging/paging.vue'
import {
  getChoiceByid,//申请择校信息
  getAllSubject,//修改择校信息中的列表数据
  getMajor,//修改择校信息中的搜索框传参后的数据列表，学校编号schoolId必传
  updateSchoolChoiceInfo,// 更新申请择校信息
} from '../../../src/api/index'

export default {
  inject: ['reload'],
  mounted () {
    this.getList()
  },
  components: {
    search, //筛选查询组件
    paging, //分页组件
  },
  data () {
    return {
      current: '',
      pagesize: '',
      total: 0,//一共多少条数据
      dialogVisible: false,//点击弹出编辑框
      formInline: {
        schoolId: '',
        majorName: ''
      },
      rules: {
        schoolId: [
          { required: true, message: '请输入学校编号', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      choiceSchoolData: [],//修改择校信息中的学校专业列表信息
      choiceSchoolInfo: [],//择校信息 
    }
  },
  methods: {
    select (selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
    selectAll (selection) {
      if (selection.length > 1) {
        selection.length = 1
      }
    },
    refresh () {
      this.reload()
    },
    closeFun () {
      //重置form表单
      this.formInline = {}
      // this.$refs['formInline'].resetFields();
      this.$refs['multipleTable'].clearSelection();
    },
    currentpage (val) {
      // console.log(val);
      this.current = val //得到新的当前页
      this.getList() //获取新的数据列表 
    },
    size (val) {
      // console.log(val);
      this.pagesize = val //得到新当前页的一共几行数据
      this.getList() //获取新的数据列表
    },
    //获取搜索框传参后的数据列表，学校编号schoolId必传
    getSearchList () {
      if (this.formInline.schoolId) {
        this.current = '' //清空分页当前页数
        this.pagesize = ''//清空分页当前页的条数
        getMajor(this.formInline.schoolId, this.formInline.majorName, this.current, this.pagesize).then(data => {
          console.log(data.data);
          this.choiceSchoolData = data.data.records
          this.total = data.data.total
        });
      }
    },
    getList () {
      //修改择校信息中的列表数据
      getAllSubject(this.current, this.pagesize).then(data => {
        console.log(data.data);
        this.choiceSchoolData = data.data.records
        this.total = data.data.total
      });
      //申请择校信息
      getChoiceByid(window.sessionStorage.getItem('orderId')).then(data => {
        this.choiceSchoolInfo = []
        this.choiceSchoolInfo.push(data.data)
        if (!data.data) {
          this.choiceSchoolInfo = []
        }
        console.log(data.data);
      });
    },
    commit () {
      console.log(this.$refs.multipleTable.selection);
      this.dialogVisible = false
      // 更新申请择校信息
      this.$refs.multipleTable.selection.forEach(item => {
        if (item.mid) {
          console.log(item.mid);
          // let data = qs.stringify({
          //   majorId: item.mid
          // })
          updateSchoolChoiceInfo(window.sessionStorage.getItem('orderId'), item.mid).then(data => {
            console.log(data);
            this.getList()
          })
        }
      });
      // updateSchoolChoiceInfo(window.sessionStorage.getItem('orderId'),2).then(data => {
      //   console.log(data);
      //   this.getList()
      // }) 
    }
  }
}
</script>

<style>
.img {
  width: 15px;
  height: 15px;
  margin-top: 15px;
}
.head {
  height: 50px;
  padding-top: 20px;
  padding-left: 20px;
  color: #666666;
  font-size: 18px;
}
.essential-information {
  margin-top: 20px;
  margin-left: 20px;
}
.edit {
  width: 20px;
  height: 20px;
  padding-top: 20px;
  margin-left: 20px;
}
.paging {
  margin-top: 15px;
  text-align: center;
}
</style>